<template>
<div id="expressPub">
        <!--后退-->
         <!--后退-->
        <img style="height:0.8rem;width:0.5rem;margin-top:1.25rem;margin-left:1.25rem;" src="../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
        <div id="card" style="padding:1rem 1.5rem 0rem 1.5rem;width:100%;">
              <section style="width:100%;height:13rem;background:#FFF;border-radius:13px;box-shadow:0.1rem 0.1rem 0.5rem 0.15rem #e2e2e2;padding:0.6rem 0.8rem;">
                  <div style="display:flex;">
                      <div style="width:90%;">
                          <p><img style="height:1.75rem;width:1.5rem;margin-top:0.5rem;"src="../../assets/tabber/word.png" alt="">
                              <input placeholder="请输入工作岗位" v-model="tranData.common1" style="font-size:0.8rem;padding:0.4rem;height:2rem;width:14rem;
                                background:#f8f8f8;border-radius:4px;margin-top:0.75rem;margin-left:0.8rem;"type="text">
                          </p>
                          <p><img style="height:1.75rem;width:1.5rem;margin-top:0.5rem;"src="../../assets/task/map.png" alt="">
                              <input placeholder="请输入工作地点" v-model="tranData.taskLocation" style="font-size:0.8rem;padding:0.4rem;height:2rem;width:14rem;
                                background:#f8f8f8;border-radius:4px;margin-top:0.75rem;margin-left:0.8rem;"type="text">
                          </p>
                      </div>
                      <p style="font-size:3.4rem;color:red;">{{showData.count}}</p>   
                  </div>
                  <p style="width:100%;" @click="openPicker"><img style="height:1.75rem;width:1.5rem;margin-right: 0.75rem;"src="../../assets/tabber/data.png" alt="">
                    <input v-model="pickerVisibleDay" placeholder="请选择工作时间" style="font-size:0.8rem;padding:0.4rem;height:2rem;width:16rem;
                                background:#f8f8f8;border-radius:4px;margin-top:0.75rem;"type="text">
                         <div style="display:flex;margin-top:1rem;">
                            <input v-model="pickerVisibleHour" type="text" style="border:3px solid rgb(41, 161, 147);width:5rem;margin-left:3rem;" @click="openPickerHour">
                            <input v-model="pickerVisibleHourLa" type="text" style="border:3px solid rgb(41, 161, 147);margin-left:1rem;width:5rem;" @click="openPickerHourLa">
                         </div>
                  </p>
                  <mt-datetime-picker
                    v-model="pickerVisibleDay"
                    type="date"
                    ref="Date"
                    year-format="{value} 年"
                    month-format="{value} 月"
                    date-format="{value} 日"
                    @confirm="handleConfirm">
                    </mt-datetime-picker>
                    <mt-datetime-picker
                        v-model="pickerVisibleHour"
                        type="time"
                         ref="Hour"
                        @confirm="handleConfirmHour">
                    </mt-datetime-picker>
                     <mt-datetime-picker
                        v-model="pickerVisibleHourLa"
                        type="time"
                         ref="HourLa"
                        @confirm="handleConfirmHourLa">
                    </mt-datetime-picker>
              </section>

              <section style="width:100%;display:flex;height:3.5rem;background:#FFF;margin-top:0.1rem;
                  border-radius:13px;box-shadow:0.1rem 0.1rem 0.5rem 0.15rem #e2e2e2;padding:0rem 0.8rem;">
                  <img style="height:1.75rem;width:1.75rem;margin-top:0.8rem;" src="../../assets/tabber/Gmoney.png" alt="">
                  <p style="display:flex;justify-content:space-between;color:#888888; font-size:0.8rem;background:#f8f8f8;padding:0.4rem;height:2rem;
                        width:16rem;border-radius:4px;margin-top:0.75rem;margin-left:0.8rem;">
                      <input onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" placeholder="请输入佣金" v-model="tranData.amount" style="background:#f8f8f8;" type="text">
                      <span>{{tranData.amount}}/天</span>          
                  </p>
              </section>

              <section style="width:100%;display:flex;height:8rem;background:#FFF;margin-top:0.1rem;
                  border-radius:13px;box-shadow:0.1rem 0.1rem 0.5rem 0.15rem #e2e2e2;padding:0rem 0.8rem;">
                  <img style="height:1.75rem;width:1.75rem;margin-top:0.8rem;" src="../../assets/tabber/write.png" alt="">
                  <p style="display:flex;justify-content:space-between; font-size:0.9rem;background:#f8f8f8;padding:0.4rem;height:6.5rem;
                       border-radius:4px;margin-top:0.75rem;margin-left:0.8rem; width:90%">
                      <textarea  placeholder="请输入兼职内容及备注"  maxlength="128" v-model="tranData.taskExplain" style="background:#f8f8f8; width:100%;height:6rem;" ></textarea>     
                  </p>
                  
              </section>
              <div style="font-size:0.8rem;height:8rem;width:100%;margin:2rem auto;box-shadow:0.1rem 0.1rem 0.5rem 0.15rem #e2e2e2;border-radius:13px;">
                  <p style="color:#29a193;padding:0.75rem 0px 0px 0.75rem;">配送人员性别要求</p>
                  <p style="padding:0.75rem 0.75rem 0px 0.75rem;"> 
                      <el-checkbox :disabled="alisTrue" v-model="checkedAll" @change="radioChange"><img style="height:1rem;width:1.3rem;" src="../../assets/homepage/un.png" alt=""></el-checkbox>
                      <input style="height:1rem;width:8rem;background:#f8f8f8;margin-left:0.25rem;margin-top:0.2rem" v-model="sexData.allSum" placeholder="请输入人数"type="text">
                  </p>
                  <section style=" display:flex;margin-top:0.25rem;padding:0.75rem 0.75rem 0px 0.75rem;">
                    <p style="width:50%;display:flex;">
                        <el-checkbox :disabled="isTrue" v-model="checkedGirl" @change="radioChange"><img style="height:1rem;width:1.3rem;" src="../../assets/homepage/gril.png" alt=""></el-checkbox>
                        <input style="height:1rem;width:8rem;background:#f8f8f8;margin-left:0.25rem;margin-top:0.2rem" v-model="sexData.womanSum" placeholder="请输入人数"type="text">
                    </p>
                    
                    <p style="width:50%;display:flex;">
                        <el-checkbox :disabled="isTrue" v-model="checkedBoy" @change="radioChange"><img style="height:1rem;width:1.3rem;" src="../../assets/homepage/boy.png" alt=""></el-checkbox>
                        <input style="height:1rem;width:8rem;background:#f8f8f8;margin-left:0.25rem;margin-top:0.2rem" v-model="sexData.manSum" placeholder="请输入人数"type="text">
                    </p>
                    
                  </section>
              </div>
            <p style="width:100%;text-align:center;height:3rem;line-height:3rem;margin-top:1rem;margin:1.5rem auto;
                  border-radius:13px;background:#29a193;color:#fff;" @click="confirm">提交订单</p>
        </div>

        
</div>
</template>
<script>
export default {
  data () {
    return {
        pickerVisibleDay:'',
        pickerVisibleHour:'',
        pickerVisibleHourLa:'',
        checkedAll:false,
        checkedBoy:false,
        checkedGirl:false,
        alisTrue:false,
        isTrue:false,
        sexData:{
            allSum:undefined,
            manSum:undefined,
            womanSum:undefined,
        },
      tranData:{
          beginTime:undefined,
          endTime:undefined,
          taskName:'兼职任务',
          taskType:'5',
          common1:undefined,
          taskLocation:undefined,
          amount:undefined,
          taskExplain:undefined,
      },
      showData:{},
      radio:"",
      pickerValue:"",
      pickerVisible:undefined,
    }
  },
  created(){
      this.getParams()
  },
  methods:{
      radioChange(){
          if(this.checkedAll==true){
              this.isTrue = true;
          }else{
              this.isTrue = false;
          }
          if(this.checkedBoy==true||this.checkedGirl==true){
              this.alisTrue = true;
          }else{
              this.alisTrue = false;
          }
      },
      handleConfirm(val){
          this.pickerVisibleDay = val.getFullYear()+'-'+val.getMonth()+1+'-'+val.getDate()
          
      },
      handleConfirmHour(){
         
      },
      handleConfirmHourLa(){
         
      },
      openPicker() {
         
        this.$refs.Date.open();
      },
      openPickerHour(){
       
          this.$refs.Hour.open();
      },
       openPickerHourLa(){
        
          this.$refs.HourLa.open();
      },
       getParams () {
            this.showData = this.$route.params;
        },
        // 提交订单
     confirm(){
         this.beginTime=this.pickerVisibleHour.split(":");
         this.endTime=this.pickerVisibleHourLa.split(":");
        if(this.beginTime[0]>this.endTime[0]){
            this.$messagebox('提示', '喵喵,开始时间必须小于结束时间噢');
        }else if(this.beginTime[0]==this.endTime[0]&&this.beginTime[1]>this.endTime[1]){
            this.$messagebox('提示', '喵喵,开始时间必须小于结束时间噢');
        }else{
            this.passConfirm()
        }
       
     },
     passConfirm(){
           if(this.checkedAll==true){
                this.tranData.allSum = this.sexData.allSum
        }
        if(this.checkedBoy==true||this.checkedGirl==true){
            if(this.checkedBoy==false&&this.checkedGirl==true){
                this.tranData.womanSum = this.sexData.womanSum
            }
            else if(this.checkedBoy==true&&this.checkedGirl==false){
                 this.tranData.manSum = this.sexData.manSum
            }else{
                this.tranData.womanSum = this.sexData.womanSum
                this.tranData.manSum = this.sexData.manSum
            }
        }
        this.tranData.beginTime = this.pickerVisibleDay+' '+this.pickerVisibleHour;
        this.tranData.endTime = this.pickerVisibleDay+' '+this.pickerVisibleHourLa;
        
        this.$router.push({
            path: '/ptPubCom/'+this.showData.allcount+'/'+this.showData.count,
            name: 'ptPubCom',
            query: {
               dayCount:this.tranData,
            }
      })
     },
  }
}
</script>
<style>
#expressPub{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../assets/tabber/bg.png);
}
#expressPub #List{
    display:flex;
    height:2.5rem;
    line-height:2.5rem;
    text-align:center;
    font-size:0.8rem;
    letter-spacing:0.15rem;
    color:#2AA094;
    background:#ffffff;
}
#expressPub #List li{
    width:33.333%;
    list-style-type:none;
}
 
</style>